let tkytest;

class uploadButton {
    constructor() {
        this.body = document.getElementById('uploadButton');
        this.input = this.body.querySelector('input');
        this.input.addEventListener('change', function() {
            let tempInput = app.uploadButton.input;
            let file = tempInput.files[0];
            let form = new FormData();
            form.append('file', file);
            fetch("/upload", {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {
                alert("上传成功");
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
        this.body.addEventListener('click', function() {
            app.uploadButton.input.click();
        });
    }
}

class DisplayTable {
    constructor() {
        this.body = document.getElementById('table');
    }

    addOne(fileName) {
        this.clear();
        let input = document.createElement('input');
        input.type = 'text';
        input.disabled = true;
        let row = document.createElement('tr');
        let column = document.createElement('td');
        input.value = fileName;
        column.appendChild(input);
        let downloadButton = document.createElement('button');
        downloadButton.innerHTML = '下载';
        downloadButton.style.float = 'right';
        let deleteButton = document.createElement('button');
        deleteButton.innerHTML = '删除';
        deleteButton.style.float = 'right';
        
        column.appendChild(downloadButton);
        column.appendChild(deleteButton);
        row.appendChild(column);

        //按钮事件绑定
        deleteButton.addEventListener('click', function(event) {
            let target = event.target;
            let fileName = target.parentElement.children[0].value;
            let data = new FormData();
            data.append('fileName', fileName);
            //请求删除文件
            fetch('/deleteFile', {
                method: "POST",
                body: data
            })
            .then(response => response.json())
            .then(data => {
                alert('删除成功');
            })
            .catch(err => {
                alert(err);
            });
        });

        downloadButton.addEventListener('click', async function(event) {
            let target = event.target;
            let fileName = target.parentElement.children[0].value;
            let data = new FormData();
            data.append('fileName', fileName);
            const response = await fetch('/download', {
                method: "POST",
                body: data
            });
            if (!response.ok) {
                alert("服务端文件异常");
                return;
            }
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            a.click();
            URL.revokeObjectURL(url);
        })
        
        this.body.appendChild(row);
    }

    clear() {
        while (this.firstChild) {
            this.removeChild(this.firstChild);
        }
    }
}


class MainController {
    constructor() {
        this.uploadButton = new uploadButton();
        this.zipTable = new DisplayTable();
        this.display();

        this.updateLst = new EventSource('/stream')
        this.updateLst.onmessage = function(event) {
            if (event.data == 'update') {
                location.reload();
            }
        }
    }

    display() {
        //获取文件列表
        fetch('/getRes', {
            method: 'POST',
            body: JSON.stringify('')
        })
        .then(response => response.json())
        .then(data => {
            for (let i = 0; i < data.fileCount; ++i) {
                this.zipTable.addOne(data.content[i]);
            }
        }) 
    }
}


app = new MainController();